/**
 * @description 表格组件
 * @author chengpeng
 */
import React, { Component } from 'react';
import ProTypes from 'prop-types'
import axios from 'axios'
import * as RecordsApi from '../utils/RecordsApi'

export default class Record extends Component {
    constructor() {
        super()
        this.state = {
            edit: false
        }
    }

    handleToggle() {
        this.setState({
            edit: !this.state.edit
        })
    }

    handleEdit(e) {
        e.preventDefault();
        const record = {
            date: this.refs.date.value,
            title: this.refs.title.value,
            amount: Number.parseInt(this.refs.amount.value)
        }
        axios.put(`${RecordsApi.api}/api/edit${this.props.record.id}.json`, {
            record
        }).then(res => {
            if(res.status === 200 && res.data.errCode === 0) {
                this.props.handleEditRecord(this.props.record, res.data)
            } else {
                alert(res.data.errMsg)
                return
            }
        })
    }

    handleDelete(e) {
        e.preventDefault();
        axios.delete(`${RecordsApi.api}/api/delete${this.props.record.id}.json`).then(res => {
            if(res.status === 200 && res.data.errCode === 0) {
                this.props.handleDeleteRecord(this.props.record)
            } else {
                alert(res.data.errMsg)
                return
            }
        })
    }

    recordRow() {
        return (
            <tr>
                <td>{this.props.record.date}</td>
                <td>{this.props.record.title}</td>
                <td>${this.props.record.amount}</td>
                <td>
                    <button className="btn btn-info mr-1" onClick={this.handleToggle.bind(this)}>Edit</button>
                    <button className="btn btn-danger mr-1" onClick={this.handleDelete.bind(this)}>Delete</button>
                </td>
            </tr>
        );
    }

    recordFrom() {
        return (
            <tr>
                <td>
                    <input type="date" className="form-control" defaultValue={this.props.record.date} ref="date" />
                </td>
                <td>
                    <input type="text" className="form-control" defaultValue={this.props.record.title} ref="title" />
                </td>
                <td>
                    <input type="number" className="form-control" defaultValue={this.props.record.amount} ref="amount" />
                </td>
                <td>
                    <button className="btn btn-info mr-1" onClick={this.handleEdit.bind(this)}>Update</button>
                    <button className="btn btn-danger mr-1" onClick={this.handleToggle.bind(this)}>Cancel</button>
                </td>
            </tr>
        );
    }

    render() {
        if(this.state.edit) {
            return this.recordFrom()
        } else {
            return this.recordRow()
        }
    }
}

Record.proTypes = { 
    id: ProTypes.number,
    date: ProTypes.string,
    title: ProTypes.string,
    amount: ProTypes.number
}